<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
	<title>题目管理</title>
	<jsp:include page="/layout/_imports.jsp"></jsp:include>
	<style>
		.t_content {
			width: 25%;
			text-align: left;
		}
	</style>
</head>
<body>
<jsp:include page="/layout/_nav.jsp"></jsp:include>

<div class="container">
	<h2>题目管理</h2>
	<button class="btn btn-primary">
		<a href="/item/add" style="text-decoration: none; color: #ffffff">添加题目</a>
	</button>
	<table class="table" style="text-align: center">
		<thead class="thead-dark">
		<tr>
			<th scope="col">序号</th>
			<th scope="col" class="t_content">题目</th>
			<th scope="col" class="t_content">内容</th>
			<th scope="col">答案</th>
			<th scope="col">操作</th>
		</tr>
		</thead>
		<tbody>

		<c:forEach items="${itemes}" var="i" varStatus="item">
			<tr>
				<th scope="row">${item.index + 1}</th>
				<td class="t_content">${i.title}</td>
				<td class="t_content">${i.content}</td>
				<td>${i.answer}</td>
				<td>
					<form action="/item/delete" method="post">
						<input type="hidden" name="page" value="${page}">
						<input type="hidden" name="size" value="${size}">
						<input type="hidden" name="id" value="${i.id}">
						<a href="/item/edit/${i.id}?page=${page}&size=${size}" class="btn btn-primary">编辑</a>
						<button type="submit" class="btn btn-danger"
								onclick="return confirm('确认删除？')">删除
						</button>
					</form>
				</td>
			</tr>
		</c:forEach>
		</tbody>
	</table>
	<div class="page_identifier">
		<c:if test="${page - 1 > 0}">
			<a class="page_previous page_item" href="/item/manage?page=${page - 1}&size=${size}">上一页</a>
		</c:if>
		<c:if test="${page - 5 > 0}">
			<a class="page_previous page_item" href="/item/manage?page=1&size=${size}">1</a>
			<a class="page_previous page_item" href="/item/manage?page=${page - 6}&size=${size}">...</a>
		</c:if>
		<c:forEach var="i"
				   begin="${(page - 5 < 0 ? 0 : page - 5) + 1}"
				   end="${(page + 5 > total ? total : page + 5)}">
			<a class="page_count_1 page_item ${page == i ? "btn btn-primary" : ""}" href="/item/manage?page=${i}&size=${size}">${i}</a>
		</c:forEach>
		<c:if test="${page + 5 < total}">
			<a class="page_previous page_item" href="/item/manage?page=${page + 6}&size=${size}">...</a>
			<a class="page_previous page_item" href="/item/manage?page=${total}&size=${size}">${total}</a>
		</c:if>
		<c:if test="${page + 1 <= total}">
			<a class="page_next page_item" href="/item/manage?page=${page + 1}&size=${size}">下一页</a>
		</c:if>

	</div>
	<div class="page_info">页面${page}/${total},共有${count}条数据</div>
	<div id="page_select">
		<form action="/item/manage" method="get" class="page_select">
			<select class="form-select" aria-label="Default select example" name="size">
				<option selected>选择每页显示的条数</option>
				<option value="5">5</option>
				<option value="10">10</option>
				<option value="15">15</option>
				<option value="20">20</option>
				<option value="50">50</option>
			</select>
		</form>
	</div>
	<style>
		.page_identifier {
			display: flex;
			flex-direction: row;
			justify-content: center;
		}

		.page_item {
			text-decoration: none;
			color: black;
			width: 50px;
			height: 50px;
			border: 1px solid grey;
			cursor: pointer;
			line-height: 50px;
			text-align: center;
			padding: unset;
			border-radius: 5px;
			margin: 0 5px;

		}

		.page_item:hover {
			border: 1px solid #4100d5;
			color: #fff;
			background: #2f7ef2;
		}

		.page_item.active {
			width: 50px;
			height: 50px;
			border: 1px solid grey;
			cursor: pointer;
			line-height: 50px;
			text-align: center;
		}

		.page_info {
			text-align: center;
			line-height: 50px;
			font-weight: lighter;
		}

	</style>
	<c:if test="${not empty errMsg}">
		<div class="alert alert-danger">${errMsg}</div>
	</c:if>
</div>
<script>
	$(".form-select").on("change", function () {
		$(".page_select").submit();
	})
</script>
</body>
</html>
